<template>
  <div class="near-cus-list">
    <SearchTime :params='params' @search="searchTime"/>
    <cus-list has-page url="/admin/prepareLesson/queryPageV2" :default="params" :auto-request="true" :headers='{ type: 1 }' ref="nearList" >
      <template v-slot:avatar>
         <img src="/src/assets/prepare-teach/book-logo.png" width="36"  alt="点津问道标品">
      </template>
      <template v-slot="{ data }">
         <div class="near-list-content">
          <div class="title">{{ data.courseName }}</div>
          <div class="session" >{{ data.courseIndexName }}</div>
          <div class="time">上次保存时间：{{ new Date(data.lastSaveDate).toLocaleString() ||'无'}}</div>
        </div>
      </template>
      <template v-slot:actions="{ data }">
        <div class="menu">
          <!-- <el-button size="small" round :class="{ 'btn-hidden': data.checkStaus !== 0 }"  @click="savePrepareClass(data)">提交备课</el-button>
          <el-button size="small" round type='primary' v-if="data.checkStaus === 0"  @click="courseDetailFileList(data)">继续备课</el-button>
          <el-button size="small" round type='primary' v-if="data.checkStaus === 2 || data.checkStaus === 1"  @click="courseDetailFileList(data)">查看备课</el-button> -->

          <el-button type="primary" round size="small" v-show="[4, 2].includes(data.checkStaus)" @click="toteach(data)">去上课</el-button>
          <el-button type="primary" round size="small" v-show="[4, 2, 3, 1].includes(data.checkStaus)" @click="courseDetailFileList(data)">查看备课</el-button>
          <el-button type="primary" round size="small" v-show="[5].includes(data.checkStaus)" @click="courseDetailFileList(data)">重新备课</el-button>
          <el-button type="primary" round size="small" v-show="[0].includes(data.checkStaus)" @click="courseDetailFileList(data)">去备课</el-button>
        </div>
      </template>
    </cus-list>
  </div>
</template>

<script lang='ts'>
import { ref, Ref, inject } from 'vue'
// import CurriculumPapers from './../components/curriculum-papers.vue';
import CurriculumPapers from './../components/curriculum-papers-two.vue';
import { ElMessage } from 'element-plus'
import SearchTime from './search-time.vue'
import $, { emitter, screen } from '$';
import ChooseClass from '../components/choose-class.vue';
import ViewCourse from "@/views/prepare-teach/components/view-course.vue";

export default {
  props: {
    listShow: Number
  },
  components: { SearchTime, ChooseClass },
  setup(props) {
    let close: any = inject('close');
    let params: Ref<any> = ref({});
    let nearList: Ref<any> = ref();
    emitter.emit('effect', (id) => params.value.subjectCode = id)

    // 搜索时刷新接口
    const searchTime = (data) => {
      nearList.value.request(data)
    }

    // 查看备课、继续备课
    const courseDetailFileList = (item) => {
      let id = props.listShow === 0 ? item.courseIndex : item.id;
      screen.create( CurriculumPapers, { title: item.courseName, id: id }).then((data: any) => {
        if(data) {
          nearList.value.request(params)
        }
      })
    }
    /*---------去上课-----------*/
    const toteach = (item)=>{
      $.screen.create(ViewCourse, { id: item.id }, { zIndex: "2010", hiddenBack: true });
      // $.screen.create( ChooseClass, { title: '选择班级', id: item.id }).then((data: any) => {
      //   if(data) {
      //     close(data)
      //   };
      // }).catch((data: any) => {
      // })
    }

    // 提交备课
    const savePrepareClass = async(data) => {
      //获取提交备课参数
      const prepareLessonRequest = new Promise((resolve, reject) => {
        $.http.post('/admin/prepareLesson/queryPrepareLessonByCourseIndexId',{ courseIndexId: data.courseIndex }).then(res => {
            if(res.result) {
              resolve(res.json)
            }else{
              ElMessage.error(res.msg)
              reject(false)
            }
        })
      })
      // 将获取的参数传到提交接口内
      prepareLessonRequest.then((res: any) => {
        let __params = {
          courseId: res.courseDto.id,
          courseIndexId: res.courseDto.courseIndexId,
          prepareLessonId: res.prepareLesson.id,
        }
        $.http.post('/admin/prepareLesson/submitPrepareLessonById', __params).then(res => {
          if(res.result){
            ElMessage.success('提交成功')
            nearList.value.request(params)
          }else {
            ElMessage.error(res.json)
          }
        })
      })
    }

    return { params, courseDetailFileList, nearList, savePrepareClass, searchTime, toteach, close }
  }
}
</script>

<style lang="scss" scoped>
.near-cus-list{
  :deep(.cus__list__container .cus__list__item){
    padding: 5px 10px;
    align-items: center;
  }
  .near-list-content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 58px;
    .courseTitle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      img{
        margin-right: 20px;
      }
    }
    .title{
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .session{
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 500;
      color: #1A2633;
    }
    .time{
      flex: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 400;
      color: #909399;
    }
  }
  .menu{
    width: 180px;
    text-align: right;
    .el-button{
      margin-left: 10px;
      font-size: 14px;
      padding: 10px 11px;
    }
    .btn-hidden{
      visibility: hidden;
    }
  }
}
@media screen and (max-width: 1280px){
  .near-cus-list{
    .menu{
      .el-button{
        margin-right: 0;
      }
    }
  }
}
</style>
